<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="divport" content="width=device-width, initial-scale=1.0"> -->
    <title>保亿家</title>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./css/pay.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/utils.css">
</head>
<style>

</style>

<body>
    <div class="page">
        <div class="header">
            <div class="empty back"> <img src="./img/返回.png" alt=""> </div>
            <div class="title">话费充值</div>

            <div class="record">
                充值记录</div>
        </div>
        <div class="row1">
            <div>手机号码</div>
            <div> <input class="input" type="number" placeholder="请输入手机号"> </div>
        </div>


        <div class="line"></div>
        <div>

            <div class="pay">
                <div>话费充值</div>




            </div>
            <div class="paylist">

                <!-- <div class="option">
                    <div class="option-top">50元</div>
                    <div class="option-bottom">售价50元</div>
                </div>
                <div class="option">
                    <div class="option-top">100元</div>
                    <div class="option-bottom">售价100元</div>
                </div>
                <div class="option">
                    <div class="option-top">200元</div>
                    <div class="option-bottom">售价200元</div>
                </div>
                <div class="option">
                    <div class="option-top">300元</div>
                    <div class="option-bottom">售价300元</div>
                </div>
                <div class="option">
                    <div class="option-top">500元</div>
                    <div class="option-bottom">售价500元</div>
                </div>
                <div class="option">
                    <div class="option-top">1000元</div>
                    <div class="option-bottom">售价1000元</div>
                </div> -->
            </div>

        </div>
        <div class="bottom">
            <div style="padding:0.1rem;margin-bottom: 0.8rem;">
                <!-- <div class="bottom1"> 我已同意提供手机号码用于话费充值，并同意
                    <text>充值协议</text>
                </div> -->
                <div style="font-size: 0.14rem;">
                    <!-- <input style="zoom:150%;" type="checkbox"> -->
                    <img class="green" src="./img/安全，盾牌.png" alt="">
                    <span
                        style="padding-top: -0.1rem;vertical-align:top;color:rgb(163, 163, 163);line-height: 0.2rem">本公司免费赠送的充值延误险由<span
                            class="guoshou">中国人寿财险公司、国任保险</span>承保</span>
                </div>
                <div bindtap="pay" class="button1">立即充值</div>
                <div bindtap="test" class="button">请先填写充值号码</div>
            </div>

            <image class="bottomimg imgplus" style="width:100%;height:100rpx" src="./img/red底图.png"></image>
        </div>
    </div>
    <div class="shadow"></div>
    <div class="alert">
        <div class="alert1">提示</div>
        <div class="alert2"></div>
        <div class="alert-select">
            <div class="cancel">取消</div>
            <div class="confirm">确定</div>
        </div>
    </div>
</body>
<script src="./js/rem.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/url.js"></script>
<script src="./js/rotate.js"></script>
<script>
    //小米手机键盘弹出  占位问题
    $(document).ready(function () {
        $('body').height($('body')[0].clientHeight);
    });
    var option = null
    var option1 = null

    var input = document.querySelector(".input") //手机号
    var button1 = document.querySelector(".button1")
    var button = document.querySelector(".button")
    var shadow = document.querySelector(".shadow")
    var alertbox = document.querySelector(".alert")
    var cancel = document.querySelector(".cancel")
    var confirm = document.querySelector(".confirm")
    var mes = document.querySelector(".alert2")
    var back = document.querySelector(".back img")
    var paylist = document.querySelector(".paylist")
    var record = document.querySelector(".record")
    var openid = GetRequest().openid
    var price = ''
    var goodsid = ''
    console.log("openid", openid)
    var body = document.querySelector("body")
    var img = document.querySelectorAll("img")
    for (var i = 0; i < img.length; i++) {
        var timestamp = Date.parse(new Date());

        img[i].src = img[i].src + '?' + timestamp
    }

    if (!is_weixin()) {
        console.log("不是从微信进入的")
        body.style.display = "block"
        body.innerHTML = `<div style="margin-top:0.2rem;margin-left:0.2rem">请从正确入口进入<div>`

    }
    $.ajax({
        method: "post",
        url: url + "?s=	App.BYJTel.GoodsList",
        data: {

        },
        dataType: 'json',
        success: (res) => {
            var data = res.data.retData.goodsInfo
            console.log("产品列表", res.data.retData.goodsInfo)
            var template = ""
            data.forEach((item) => {
                template += `
                <div class="option" data-goodsid="${item.GOODSID}">
                    <div class="option-top">${item.GOODSPRICE}元</div>
                    <div class="option-bottom">售价${item.SALEGOODSPRICE}元</div>
                </div>
                `
                paylist.innerHTML = template
                // 选择 充值面额
                option = document.querySelectorAll('.option')
                option1 = document.querySelectorAll('.option-bottom')
                for (let i = 0; i < option.length; i++) {
                    option[i].onclick = function (e) {
                        for (let j = 0; j < option.length; j++) {
                            option[j].classList.remove("active")
                            option[j].children[1].classList.remove("active1")
                        }
                        this.classList.add("active")
                        this.children[1].classList.add("active1")


                        console.log(this.getAttribute("data-goodsid"))
                        price = this.children[0].innerHTML
                        goodsid = this.getAttribute("data-goodsid")
                        if (checkPhone(input.value) && price != '') {
                            button.style.display = "none"
                            button1.style.display = "flex"
                        }
                    }

                }
            })
        },//成功后的回调函数
        error: (res) => {
            console.log("失败", JSON.stringify(res))
        }//失败后的回调函数
    }
    )

    back.onclick = function () {
        var timestamp = Date.parse(new Date());
        window.location.href = "main.html?_=" + timestamp
    }
    record.onclick = function () {
        var timestamp = Date.parse(new Date());
        window.location.href = 'payrecord.html?_=' + timestamp
    }
    //监听input 
    input.oninput = function () {
        if (input.value.length > 11) {
            input.value = input.value.slice(0, 11)
        }

        if (checkPhone(input.value) && price != '') {
            button.style.display = "none"
            button1.style.display = "flex"
        } else {
            button.style.display = "flex"
            button1.style.display = "none"
        }
    }
    //点击充值按钮
    button1.onclick = function () {
        shadow.style.display = "block"
        alertbox.style.display = "flex"
        mes.innerHTML = "确认为手机号码" + input.value + "充值" + price + "？"
    }
    //弹框确定
    confirm.onclick = function () {
        console.log(1)
        console.log(input.value)
        var a = {
            "charge_accno": input.value
        }
        $.ajax({
            method: "post",
            url: url + "?s=App.BYJTel.Charges",
            data: {
                goods_id: goodsid,
                openid: openid,
                charge_data: a
            },
            dataType: 'json',
            success: (res) => {
                console.log(res)
                var timestamp = Date.parse(new Date());
                window.location.href = "payrecord.html?_=" + timestamp
            },//成功后的回调函数
            error: (res) => {
                console.log("失败", JSON.stringify(res))
            }//失败后的回调函数
        }
        )
    }
    // 弹框取消
    cancel.onclick = function () {
        shadow.style.display = "none"
        alertbox.style.display = "none"
    }
    //手机号正则
    function checkPhone(phone) {
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            return false;
        } else {
            return true
        }
    }
    function GetRequest() {

        var url = location.search;
        //获取url中"?"符后的字串  
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

            }
        }
        return theRequest;

    }
    //判断是否为微信客户端
    function is_weixin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger")
            return true;
        else
            return false;
    }

</script>

</html>